<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="./JS/easeljs-0.4.2.min.js"></script>
</head>
<body>
    <div>
        <canvas id="canvas" width="600" height="150">
            Your browser not support Canvas!
        </canvas>
    </div>
    <div>
        <input type="button" id="btn" value="变换表情"/>
    </div>
<script type="text/javascript">
    var icon;
    var flag = true;

    var stage = new Stage(document.getElementById("canvas"));
    var spritSheet = new SpriteSheet({
        images:["./picture/frog.png"],
        frames:{width:100,height:100}
    });

    icon = new BitmapAnimation(spritSheet);

    stage.addChild(icon);
    icon.gotoAndPlay(0);
    //stage.tick();
    Ticker.addListener(stage);

    icon.onTick = tick;

    icon.onAnimationEnd = onAnimationEnd;

    function tick(){
        if(icon.currentFrame == 18){
            icon.currentFrame = 0;
        }
    };

    function onAnimationEnd(){
        icon.currentFrame = 19;
    }

    document.getElementById("btn").onclick = change;
    function change(){
        flag = !flag;
        if(flag){
            icon.currentFrame = 0;
        }
        else{
            icon.currentFrame = 19;
        }
    }
    //icon.paused = true;

</script>
</body>
</html>